<template>
    <div>
        <h1>商品管理</h1>
        <el-button type="primary" icon="el-icon-plus" size="small" @click="dialogFormVisible = true">添加</el-button>
        <el-dialog title="添加品牌" :visible.sync="dialogFormVisible">
            <el-steps :space="200" :active="step" finish-status="success" align-center >
                <el-step title="基本信息"></el-step>
                <el-step title="商品详情"></el-step>
                <el-step title="规格参数"></el-step>
                <el-step title="SKU属性"></el-step>
                <el-step title="保存商品"></el-step>
            </el-steps>
<!--            使用自定义组件-->
            <GoodsBasic v-if="step === 1" form="form"></GoodsBasic>
            <GoodsDetails v-if="step === 2"></GoodsDetails>
            <GoodsSpec v-if="step === 3"></GoodsSpec>
            <GoodsSKU v-if="step === 4"></GoodsSKU>
            <GoodsSave v-if="step === 5"></GoodsSave>

            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="step>1?step--:step" v-if="step>1">上一步</el-button>
                <el-button type="primary" @click="step<5?step++:step" v-if="step<5">下一步</el-button>
<!--                前端三个等于和两个等于的区别：-->
<!--                两个等于会转换类型再比较，三个等于不转换直接比较-->
                <el-button type="primary" v-if="step===5">保存</el-button>
            </div>
        </el-dialog>
        <!--        表格-->
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="id"
                    label="编号"
                    width="60px"
            >
            </el-table-column>
            <el-table-column
                    prop="title"
                    label="标题"
            >
            </el-table-column>

            <el-table-column
                    prop="subTitle"
                    label="子标题"
            >
                <template slot-scope="scope">
                    <span v-if="scope.row.subTitle.length<=20">{{scope.row.subTitle}}</span>
                    <span v-else>{{scope.row.subTitle.substr(0,20)}}...</span>
                </template>
            </el-table-column>
            <el-table-column
                    prop="brand"
                    label="品牌"
            >
            </el-table-column>
            <el-table-column
                    prop="category"
                    label="分类"
            >
            </el-table-column>
            <el-table-column
                    prop="saleable"
                    label="状态"
                    width="60px"
            >
                <template slot-scope="scope">
                    <el-button v-if="scope.row.saleable==1" size="mini" type="success">
                        {{scope.row.saleable==1?'上架':'下架'}}
                    </el-button>
                    <el-button v-if="scope.row.saleable==0" size="mini" type="warning">
                        {{scope.row.saleable==1?'上架':'下架'}}
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间"
            >
            </el-table-column>
            <el-table-column
                    prop="lastUpdateTime"
                    label="修改时间"
            >
            </el-table-column>
            <!--            <el-table-column-->
            <!--                    label="图片">-->
            <!--                <template slot-scope="scope">-->
            <!--                    <el-image-->
            <!--                            style="width: 100px; height: 100px"-->
            <!--                            :fit="fit"-->
            <!--                            :src="scope.row.image"></el-image>-->
            <!--                </template>-->
            <!--            </el-table-column>-->
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <!--        分页-->
        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                :current-page="current"
                @current-change="loadSpu">
        </el-pagination>
    </div>
</template>

<script>
    // 1.引入自定义组件
    import GoodsBasic from "../../components/GoodsBasic";
    import GoodsDetails from "../../components/GoodsDetails";
    import GoodsSave from "../../components/GoodsSave";
    import GoodsSKU from "../../components/GoodsSKU";
    import GoodsSpec from "../../components/GoodsSpec";

    export default {
        name: "Goods",
        //2.申明组件
            components:{
                GoodsSave, GoodsSKU, GoodsSpec, GoodsDetails, GoodsBasic
            },

        data() {
            return {
                tableData: [],
                total: 0,
                current: 0,
                dialogFormVisible: false,
                step: 1  ,  //当前步骤
                // 表单对象
                form:{title:'',subTitle:'',cid1:0,cid2:0,cid3:0,brandId:0,saleable:0,createTime:'',lastUpdateTime:''}
            };
        },
        methods: {
            handleEdit(index, row) {

            },
            handleDelete(index, row) {

            },
            loadSpu(curr) {
                this.$http.get("http://api.blb.com/api/goods-api/spu/page/" + curr)
                    .then(res => {
                        if (res.data.code == 1) {
                            this.tableData = res.data.data.records;
                            this.total = res.data.data.total;
                            this.current = res.data.data.current;
                            console.log(this.tableData);
                        }
                    });

            }
        },
        mounted() {
            this.loadSpu(1)
        }
    }
</script>

<style scoped>

</style>